<template>
  <div class="dashboard-editor-container">
    <div class="index-warp">
      <div class="index-warp-li">
        <div class="vehicle-map-top">
          <div class="vehicle-map-top-warp"></div>
          <PieChart2
            style="margin-top: 30px"
            text="支付方式"
            :dataPropos="data7"
          />
        </div>
      </div>
      <div class="index-warp-li">
        <div class="vehicle-map-top">
          <div class="vehicle-map-top-warp"></div>
          <PieChart2
            style="margin-top: 30px"
            text="店铺数据"
            :dataPropos="data8"
          />
        </div>
      </div>
    </div>
    <div class="index-warp">
      <div class="index-warp-li">
        <div class="vehicle-map-top">
          <div class="vehicle-map-top-warp">
            <div class="index-top-3-top">
              <div
                :class="
                  indexActive1 == index
                    ? 'index-top-3-top-li active'
                    : 'index-top-3-top-li'
                "
                v-for="(item, index) in dataTime1"
                @click="indexChange2(item, index)"
              >
                {{ item }}
              </div>
            </div>
            <el-date-picker
              style="margin-left: 15px"
              v-model="value1"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
          <PieChart1
            style="margin-top: 30px"
            text="订单历史各商品类型交易量占比"
            :dataPropos="data1"
          />
        </div>
      </div>
      <div class="index-warp-li">
        <div class="vehicle-map-top">
          <div class="vehicle-map-top-warp">
            <div class="index-top-3-top">
              <div
                :class="
                  indexActive2 == index
                    ? 'index-top-3-top-li active'
                    : 'index-top-3-top-li'
                "
                v-for="(item, index) in dataTime2"
                @click="indexChange2(item, index)"
              >
                {{ item }}
              </div>
            </div>
            <el-date-picker
              style="margin-left: 15px"
              v-model="value2"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
          <PieChart1
            style="margin-top: 30px"
            text="会员消费交易占比"
            :dataPropos="data2"
          />
        </div>
      </div>
    </div>
    <div class="index-warp">
      <div class="index-warp-li" style="width: 100%; padding-left: 10px">
        <div class="vehicle-map-top">
          <div class="vehicle-map-top-warp">
            <div class="index-top-3-top">
              <div
                :class="
                  indexActive3 == index
                    ? 'index-top-3-top-li active'
                    : 'index-top-3-top-li'
                "
                v-for="(item, index) in dataTime3"
                @click="indexChange2(item, index)"
              >
                {{ item }}
              </div>
            </div>
            <el-date-picker
              style="margin-left: 15px"
              v-model="value3"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
          <LineChart
            text="订单历史交易量累计趋势图"
            height="320px"
            :dataLegend="dataLegend1"
            :dataAxis="dataAxis1"
            :series="series1"
          />
        </div>
      </div>
    </div>
    <div class="index-warp">
      <div class="index-warp-li" style="width: 100%; padding-left: 10px">
        <div class="vehicle-map-top">
          <div class="vehicle-map-top-warp">
            <div class="index-top-3-top">
              <div
                :class="
                  indexActive4 == index
                    ? 'index-top-3-top-li active'
                    : 'index-top-3-top-li'
                "
                v-for="(item, index) in dataTime4"
                @click="indexChange4(item, index)"
              >
                {{ item }}
              </div>
            </div>
            <el-date-picker
              style="margin-left: 15px"
              v-model="value4"
              type="date"
              placeholder="选择日期"
            >
            </el-date-picker>
          </div>
          <LineChart
            text="会员业绩交易分析"
            height="320px"
            :dataLegend="dataLegend2"
            :dataAxis="dataAxis2"
            :series="series2"
          />
        </div>
      </div>
    </div>
    <div class="index-warp">
      <div class="index-warp-li">
        <div class="vehicle-map-top">
          <div class="vehicle-map-top-warp">
            <div class="index-top-3-top">
              <div
                :class="
                  indexActive5 == index
                    ? 'index-top-3-top-li active'
                    : 'index-top-3-top-li'
                "
                v-for="(item, index) in dataTime5"
                @click="indexChange2(item, index)"
              >
                {{ item }}
              </div>
            </div>
            <el-date-picker
              style="height: 35px; margin-left: 20px; width: 250px"
              v-model="valueTime5"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
          <LineChart1
            style="margin-top: 10px"
            text="订单历史交易量趋势图"
            height="320px"
            :dataAxis="dataAxis3"
            :series="series3"
          />
        </div>
      </div>
      <div class="index-warp-li">
        <div class="vehicle-map-top">
          <div class="vehicle-map-top-warp">
            <div class="index-top-3-top">
              <div
                :class="
                  indexActive6 == index
                    ? 'index-top-3-top-li active'
                    : 'index-top-3-top-li'
                "
                v-for="(item, index) in dataTime6"
                @click="indexChange2(item, index)"
              >
                {{ item }}
              </div>
            </div>
            <el-date-picker
              style="height: 35px; margin-left: 20px; width: 250px"
              v-model="valueTime6"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
          <LineChart1
            style="margin-top: 10px"
            text="会员交易分析"
            height="320px"
            :dataAxis="dataAxis4"
            :series="series4"
          />
        </div>
      </div>
    </div>
    <div class="index-warp">
      <div class="index-warp-li">
        <div class="vehicle-map-top">
          <BarChart1
            text="订单今日各商品类型不同渠道交易量柱状图"
            :dataAxis="dataAxis5"
            :dataLegend="dataLegend5"
            :series="series5"
            height="360px"
          />
        </div>
      </div>
      <div class="index-warp-li">
        <div class="vehicle-map-top">
          <BarChart1
            text="商户数据分析"
            :dataAxis="dataAxis6"
            :dataLegend="dataLegend6"
            :series="series6"
            height="360px"
          />
        </div>
      </div>
    </div>
  </div>
</template>
    
  <script>
import PieChart1 from "./dashboard/PieChart1";
import PieChart2 from "./dashboard/PieChart2";
import LineChart from "./dashboard/LineChart";
import LineChart1 from "./dashboard/LineChart1";
import BarChart1 from "./dashboard/BarChart1";
export default {
  name: "VehicleManagement",
  components: {
    PieChart1,
    PieChart2,
    LineChart,
    LineChart1,
    BarChart1,
  },
  data() {
    return {
      dataTime1: ["单日查询", "周日查询", "按月查询", "按年查询"],
      indexActive1: 0,
      value1: "",
      data1: [
        { value: 320, name: "酒店" },
        { value: 240, name: "书桌" },
        { value: 149, name: "巴士" },
        { value: 100, name: "套餐" },
        { value: 59, name: "熟食" },
        { value: 59, name: "停车场" },
        { value: 59, name: "自由组合" },
      ],
      dataTime2: ["单日签到", "范围签到", "按月查询", "按年查询"],
      indexActive2: 0,
      value2: "",
      data2: [
        { value: 20, name: "酒店" },
        { value: 230, name: "书桌" },
        { value: 19, name: "巴士" },
        { value: 90, name: "套餐" },
        { value: 66, name: "熟食" },
        { value: 32, name: "停车场" },
        { value: 67, name: "自由组合" },
      ],
      dataTime3: ["按月查询", "按年查询"],
      indexActive3: 0,
      value3: "",
      dataLegend1: [
        "2023-07订单交易量",
        "2023-08订单交易量",
        "2023-09订单交易量",
      ],
      dataAxis1: [
        "1日",
        "4日",
        "7日",
        "10日",
        "13日",
        "15日",
        "19日",
        "22日",
        "25日",
        "29日",
        "31日",
      ],
      series1: [
        {
          name: "2023-07订单交易量",
          itemStyle: {
            normal: {
              color: "#FF005A",
              lineStyle: {
                color: "#FF005A",
                width: 2,
              },
            },
          },
          smooth: true,
          type: "line",
          data: [120, 132, 101, 134, 90, 230, 210, 190, 123, 156, 345],
          animationDuration: 2800,
          animationEasing: "cubicInOut",
        },
        {
          name: "2023-08订单交易量",
          smooth: true,
          type: "line",
          itemStyle: {
            normal: {
              color: "#3888fa",
              lineStyle: {
                color: "#3888fa",
                width: 2,
              },
              areaStyle: {
                color: "#f3f8ff",
              },
            },
          },
          data: [220, 182, 191, 234, 290, 330, 310, 101, 134, 90, 230],
          animationDuration: 2800,
          animationEasing: "quadraticOut",
        },
        {
          name: "2023-09订单交易量",
          smooth: true,
          type: "line",
          itemStyle: {
            normal: {
              color: "#19BE6B",
              lineStyle: {
                color: "#19BE6B",
                width: 2,
              },
              areaStyle: {
                color: "#f3f8ff",
              },
            },
          },
          data: [150, 232, 201, 154, 190, 330, 410, 191, 234, 290, 330],
          animationDuration: 2800,
          animationEasing: "quadraticOut",
        },
      ],
      dataTime4: ["按月查询", "按年查询"],
      indexActive4: 0,
      value4: "",
      dataLegend2: [
        "2023-07订单交易量",
        "2023-08订单交易量",
        "2023-09订单交易量",
      ],
      dataAxis2: [
        "1日",
        "4日",
        "7日",
        "10日",
        "13日",
        "15日",
        "19日",
        "22日",
        "25日",
        "29日",
        "31日",
      ],
      series2: [
        {
          name: "2023-07订单交易量",
          itemStyle: {
            normal: {
              color: "#FF005A",
              lineStyle: {
                color: "#FF005A",
                width: 2,
              },
            },
          },
          smooth: true,
          type: "line",
          data: [190, 123, 156, 345, 120, 132, 101, 134, 90, 230, 210],
          animationDuration: 2800,
          animationEasing: "cubicInOut",
        },
        {
          name: "2023-08订单交易量",
          smooth: true,
          type: "line",
          itemStyle: {
            normal: {
              color: "#3888fa",
              lineStyle: {
                color: "#3888fa",
                width: 2,
              },
              areaStyle: {
                color: "#f3f8ff",
              },
            },
          },
          data: [
            310, 101, 134, 90, 182, 191, 234, 290, 330, 310, 101, 134, 90, 230,
          ],
          animationDuration: 2800,
          animationEasing: "quadraticOut",
        },
        {
          name: "2023-09订单交易量",
          smooth: true,
          type: "line",
          itemStyle: {
            normal: {
              color: "#19BE6B",
              lineStyle: {
                color: "#19BE6B",
                width: 2,
              },
              areaStyle: {
                color: "#f3f8ff",
              },
            },
          },
          data: [
            410, 191, 234, 290, 330, 150, 232, 201, 154, 190, 330, 410, 191,
            234, 290, 330,
          ],
          animationDuration: 2800,
          animationEasing: "quadraticOut",
        },
      ],
      dataTime5: ["近一周", "近一月", "近三月", "近半年"],
      indexActive5: 0,
      valueTime5: "",
      dataAxis3: ["2023-07-15", "2023-08-15", "2023-09-15", "2023-10-15"],
      series3: [
        {
          type: "line",
          smooth: false,
          itemStyle: {
            normal: {
              color: "#FF005A",
              lineStyle: {
                color: "#FF005A",
                width: 2,
              },
            },
          },
          data: [190, 123, 156, 345],
        },
      ],
      dataTime6: ["近一周", "近一月", "近三月", "近半年"],
      indexActive6: 0,
      valueTime6: "",
      dataAxis4: ["2023-07-15", "2023-08-15", "2023-09-15", "2023-10-15"],
      series4: [
        {
          type: "line",
          smooth: false,
          itemStyle: {
            normal: {
              color: "#3888fa",
              lineStyle: {
                color: "#3888fa",
                width: 2,
              },
              areaStyle: {
                color: "#f3f8ff",
              },
            },
          },
          data: [190, 123, 156, 345],
        },
      ],
      dataAxis5: ["酒店", "景点", "巴士", "套餐", "美食", "停车场", "自由组合"],
      dataLegend5: ["直销交易量", "分销商交易量"],
      series5: [
        {
          name: "直销交易量",
          type: "bar",
          barWidth: 35,
          barGap: "-100%",
          data: [79, 52, 200, 334, 390, 330, 79],
          itemStyle: {
            normal: {
              barBorderRadius: false,
              color: "#FF9900",
            },
          },
        },
        {
          name: "分销商交易量",
          type: "bar",
          barWidth: 35,
          barGap: "-100%",
          data: [334, 390, 330, 79, 79, 52, 200],
          itemStyle: {
            normal: {
              barBorderRadius: false,
              color: "#2D8CF0",
            },
          },
        },
      ],
      dataAxis6: ["酒店", "景点", "巴士", "套餐", "美食", "停车场", "自由组合"],
      dataLegend6: ["直销交易量", "分销商交易量"],
      series6: [
        {
          name: "直销交易量",
          type: "bar",
          barWidth: 35,
          barGap: "-100%",
          data: [19, 42, 20, 34, 390, 330, 79],
          itemStyle: {
            normal: {
              barBorderRadius: false,
              color: "#FF9900",
            },
          },
        },
        {
          name: "分销商交易量",
          type: "bar",
          barWidth: 35,
          barGap: "-100%",
          data: [334, 334, 390, 330, 79, 89, 56],
          itemStyle: {
            normal: {
              barBorderRadius: false,
              color: "#2D8CF0",
            },
          },
        },
      ],
      data7: [
        { value: 320, name: "微信" },
        { value: 240, name: "支付宝" },
        { value: 149, name: "银行卡" },
        { value: 100, name: "财付通" },
      ],
      data8: [
        { value: 120, name: "微信" },
        { value: 40, name: "支付宝" },
        { value: 68, name: "银行卡" },
        { value: 290, name: "财付通" },
      ],
    };
  },

  created() {},
  methods: {},
};
</script>
    
    <style rel="stylesheet/scss" lang="scss">
.vehicle-map-top-warp {
  display: flex;
  justify-content: right;
}
.index-top-3-top {
  margin-left: 20px;
  display: flex;
  justify-content: right;
  height: 35px;
  .index-top-3-top-li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 35px;
    border: 1px solid #999;
    color: #999;
    font-size: 14px;
    cursor: pointer;
  }
  .active {
    border: 1px solid #2d8cf0 !important;
    color: #2d8cf0 !important;
  }
}
.dashboard-editor-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px;
  // background-color: rgb(240, 242, 245);
  min-height: 100vh;
  background: #f2f8ff;
  position: relative;
  .index-warp {
    display: flex;
    justify-content: space-between;
    height: 380px;
    .index-warp-li {
      padding-top: 20px;
      padding-right: 10px;
      background: #fff;
      width: 49.5%;
      height: 100%;
    }
  }
  .index-warp + .index-warp {
    margin-top: 10px;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
  .index-top {
    display: flex;
    align-content: center;
    justify-content: space-between;
    height: 44.5vh;
    div {
      height: 100%;
    }
    .index-top-1 {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 19%;
      .index-top-1-li {
        display: flex;
        align-items: center;
        height: 31%;
        background: #fff;
        border-radius: 5px;
        .index-top-1-li-left {
          display: flex;
          justify-content: center;
          align-content: center;
          width: 30%;
          border-top-left-radius: 5px;
          border-bottom-left-radius: 5px;
          img {
            width: 40px;
            object-fit: contain;
          }
        }
        .index-top-1-li-right {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 70%;
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;
          .num {
            font-size: 30px;
            font-weight: bold;
          }
          .title {
            margin-top: 6px;
            font-size: 13px;
          }
        }
      }
    }
    .index-top-2 {
      padding-top: 2%;
      width: 39.5%;
      background: #fff;
    }
    .index-top-3 {
      padding: 15px;
      width: 59.5%;
      background: #fff;
      .index-top-3-top {
        display: flex;
        justify-content: right;
        height: 35px;
        .index-top-3-top-li {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 80px;
          height: 35px;
          border: 1px solid #999;
          color: #999;
          font-size: 14px;
          cursor: pointer;
        }
        .active {
          border: 1px solid #2d8cf0 !important;
          color: #2d8cf0 !important;
        }
      }
      .index-top-3-bottom {
        margin-top: 20px;
      }
    }
  }
}
</style>
    